<template>
  <view class="valueCardRecharge">
    <view v-if="cardlist.length > 0">
      <view class="swiper-container">
        <swiper class="swiper-block" circular="true" previous-margin="90rpx" next-margin="90rpx" current="0" @change="swiperChange">
          <block v-for="(item, index) in cardlist" :key="index">
            <swiper-item class="swiper-item">
              <image mode="aspectFill" :class="['slide-image', swiperIndex == index ? 'active' : '']" :src="item.image" />
              <text :class="['title', swiperIndex == index ? 'active' : '']">充值金额</text>
              <text :class="['mlogo', swiperIndex == index ? 'active' : '']">￥</text>
              <input :class="['rechargeIn', swiperIndex == index ? 'active' : '']" type="number" :value="inputMoney" :focus="focus" @input="bindKeyInput">
              <text :class="['desc', swiperIndex == index ? 'active' : '']">本次最多可充值¥50000.00元</text>
              <text :class="['cardno', swiperIndex == index ? 'active' : '']">{{ item.cardno }}</text>
            </swiper-item>
          </block>
        </swiper>
      </view>

      <view class="card-recharge">
        <view class="sec" :style="{'margin-right': '33rpx', 'background': ck20}" data-sec="ck20" @tap="ckRecharge">
          <view class="title">20元</view>
          <view class="value">售价：20元</view>
        </view>
        <view class="sec" :style="{'margin-right': '33rpx', 'background': ck50}" data-sec="ck50" @tap="ckRecharge">
          <view class="title">50元</view>
          <view class="value">售价：50元</view>
        </view>
        <view class="sec" :style="{'background': ck100}" data-sec="ck100" @tap="ckRecharge">
          <view class="title">100元</view>
          <view class="value">售价：100元</view>
        </view>
      </view>
      <view class="card-recharge">
        <view class="sec" :style="{'margin-right': '33rpx', 'background': ck200}" data-sec="ck200" @tap="ckRecharge">
          <view class="title">200元</view>
          <view class="value">售价：200元</view>
        </view>
        <view class="sec" :style="{'margin-right': '33rpx', 'background': ck500}" data-sec="ck500" @tap="ckRecharge">
          <view class="title">500元</view>
          <view class="value">售价：500元</view>
        </view>
        <view class="sec" :style="{'background': ckzdy}" data-sec="ckzdy" @tap="ckRecharge">
          <view class="txt">自定义金额</view>
        </view>
      </view>
      <view class="line" />

      <view class="service">
        <view class="title">更多服务</view>
        <view style="display: flex;">
          <view class="box" style="margin-right: 40px">
            <image mode="aspectFill" src="http://127.0.0.1:8888/static/images/images/stored_card/recharge_order.png" style="height: 53rpx;width: 52rpx;" />
            <view class="rechargeOrder">充值订单</view>
          </view>
          <view class="box">
            <image mode="aspectFill" src="http://127.0.0.1:8888/static/images/images/stored_card/recharge_card.png" style="height: 45rpx;width: 58rpx;" />
            <view class="rechargeCard" style="margin-top: 4px;">选择充值卡</view>
          </view>
        </view>
      </view>

      <view class="line-weight" />
      <view class="card-form">
        <view class="desc-1">充值说明：</view>
        <view class="desc-2">1、如需开具发票，请到任一部门</view>
      </view>
      <view class="foot">
        <view class="left-wrapper">
          <view class="pay">
            <view class="count-txt">支付金额：</view>
            <view class="count-num">￥{{ payMoney }}</view>
          </view>
          <view class="in">
            <view class="count-txt">到账金额：</view>
            <view class="count-num">￥{{ payMoney }}</view>
          </view>
        </view>
        <view class="flex" hover-class="none" @tap="comfirmRecharge">
          <view class="pay-btn">立即充值</view>
        </view>
      </view>
    </view>
    <view v-else style="position: absolute;top: 0;bottom: 0;left: 0;right: 0;display: flex;justify-content: center;margin-top: 100%;">
      还没有绑定储值卡
    </view>
  </view>
</template>
<script>
const util = require('@/utils/util.js')
import { cardUserList, wxPay2UnifiedOrder, orderCouponSave, orderCouponCancel } from '@/api/api1'
export default {
  components: {},
  data() {
    return {
      cardlist: [],
      swiperIndex: 0,
      ck20: '',
      ck50: '',
      ck100: '',
      ck200: '',
      ck500: '',
      ckzdy: '',
      inputMoney: '', // 输入金额
      focus: false, // 输入金额input聚焦
      payMoney: 0.00 // 支付金额
    }
  },
  computed: {
    userInfo() {
      return this.$store.getters.userInfo
    },
    hasLoginAndHasMallInfo() {
      return this.$store.getters.hasLoginAndHasMallInfo
    }
  },
  onLoad() {
  },
  onReachBottom() {
  },

  methods: {
    swiperChange(e) {
      this.swiperIndex = e.detail.current
    },
    ckRecharge(e) {
      const sec = e.currentTarget.dataset.sec
      this.ck20 = ''
      this.ck50 = ''
      this.ck100 = ''
      this.ck200 = ''
      this.ck500 = ''
      this.ckzdy = ''

      if (sec === 'ck20') {
        this.ck20 = '#ffebeb'
        this.inputMoney = 20
        this.payMoney = 20.00
      } else if (sec === 'ck50') {
        this.ck50 = '#ffebeb'
        this.inputMoney = 50
        this.payMoney = 50.00
      } else if (sec === 'ck100') {
        this.ck100 = '#ffebeb'
        this.inputMoney = 100
        this.payMoney = 100.00
      } else if (sec === 'ck200') {
        this.ck200 = '#ffebeb'
        this.inputMoney = 200
        this.payMoney = 200.00
      } else if (sec === 'ck500') {
        this.ck500 = '#ffebeb'
        this.inputMoney = 500
        this.payMoney = 500.00
      } else if (sec === 'ckzdy') {
        this.ckzdy = '#ffebeb'
        this.inputMoney = ''
        this.focus = true
        this.payMoney = 0.00
      }
    },
    bindKeyInput(e) {
      this.ck20 = ''
      this.ck50 = ''
      this.ck100 = ''
      this.ck200 = ''
      this.ck500 = ''
      this.ckzdy = '#ffebeb'

      var value = e.detail.value.replace(/[^\.\d]/g, '')
      if (value > 50000) {
        this.payMoney = 50000
        this.inputMoney = 50000
      } else {
        this.payMoney = value
        this.inputMoney = value
      }
    },
    init() {
      uni.showLoading({
        title: '加载我的储值卡..'
      })
      cardUserList({
        status: 'Y',
        receiverCardNo: this.userInfo.cardNo
      }).then(res => {
        uni.hideLoading()
        const cardList = res.data
        console.log('查询会员储值卡列表：', cardList)

        this.cardList = cardList
      })
    },
    async comfirmRecharge() {
      try {
        const that = this
        uni.showLoading({ title: '充值..' })

        const payNo = Number(Math.random().toString().substr(3, 5) + Date.now()) // 商户订单号

        const finalMoney = that.totalMoney
        const cardNo = that.userInfo.cardNo
        const phone = that.userInfo.phone
        const openId = that.userInfo.miniOpenid
        const storeNo = '201'// 暂时写死
        const body = '储值卡充值：' + finalMoney + '元'

        var params = {
          vipCardNo: cardNo,
          cardNo: that.cardlist[that.swiperIndex].prepaidCardNo,
          payOrderNo: payNo,
          rechargeAmount: finalMoney
        }
        console.info('储值卡充值参数： ', params)

        var unifiedOrderParam = {
          outTradeNo: payNo, // 商户订单号
          deviceInfo: storeNo, // 门店号或收银设备ID
          body: body, // 商品描述
          totalFee: util.accMul(finalMoney, 100), // 标价金额(单位为分)
          openId: openId
        }
        var requestPaymentParam = null
        await wxPay2UnifiedOrder(unifiedOrderParam).then(res => {
          console.info('统一下单返回：', res)
          requestPaymentParam = res.data.signObj
        })

        var orderParam = {
          orderNo: payNo,
          money: finalMoney,
          discountAmout: 0,
          finalMoney: finalMoney,
          mkt: storeNo,
          phone: phone,
          cardNo: cardNo,
          orderType: 'ORDER_VALUE_CARD_RECHARGE',
          attach: JSON.stringify(params)
        }
        console.info('保存订单参数：', orderParam)
        orderCouponSave(orderParam).then(res => {
          console.info('保存订单返回：', res)
          if (!res) {
            console.info('保存订单失败')
            return wx.hideLoading()
          }
        })

        // 唤起支付
        uni.requestPayment({
          provider: 'wxpay',
          timeStamp: requestPaymentParam.timeStamp,
          nonceStr: requestPaymentParam.nonceStr,
          package: requestPaymentParam.packageObj,
          signType: requestPaymentParam.signType,
          paySign: requestPaymentParam.paySign,
          success(res) {
            console.log('success:' + JSON.stringify(res))
            console.log('微信支付成功')
          },
          fail(err) {
            console.log('fail:' + JSON.stringify(err))
            console.log('微信支付失败')
          },
          complete(res) {
            wx.hideLoading()
            console.log('complete:' + JSON.stringify(res))
            if (res.requestPayment !== 'ok') {
              orderCouponCancel({ orderNo: payNo, exceptions: res.requestPayment })
            }
            console.log('微信支付结束')
          }
        })
      } catch (error) {
        wx.hideLoading()
        console.error(error)
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.valueCardRecharge {
  display: flex;
}

/* 轮播图 */
.swiper-container {
  width: 100%;
  height: 505rpx;
}

.swiper-block {
  height: 420rpx;
  width: 100%;
}

.swiper-item {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  overflow: unset;
}

.swiper-item .slide-image {
  position: relative;
  height: 320rpx;
  width: 500rpx;
  border-radius: 47rpx;
  box-shadow: 0px 0px 30rpx rgba(0, 0, 0, 0.2);
  margin: 0rpx 30rpx;
  z-index: 1;
}

.swiper-item .slide-image.active {
  transform: scale(1.14);
  transition: all 0.2s ease-in 0s;
  z-index: 20;
}

.swiper-item .title {
  display: none;
}

.swiper-item .title.active {
  display: block;
  position: absolute;
  z-index: 21;
  transform: translateX(0%);
  color: #ffffff;
  top: 14%;
  left: 6%;
}

.swiper-item .desc {
  display: none;
}

.swiper-item .desc.active {
  display: block;
  position: absolute;
  z-index: 21;
  transform: translateX(0%);
  color: #ffffff;
  font-size: 21rpx;
  top: 53%;
  left: 7%;
}

.swiper-item .mlogo {
  display: none;
}

.swiper-item .mlogo.active {
  display: block;
  position: absolute;
  z-index: 21;
  color: #ffffff;
  font-size: 68rpx;
  top: 33%;
  left: 7%;
}

.swiper-item .cardno {
  display: none;
}

.swiper-item .cardno.active {
  display: block;
  position: absolute;
  z-index: 21;
  transform: translateX(0%);
  color: #ffffff;
  font-weight: 500;
  top: 77%;
  right: 7%;
}

.swiper-item .rechargeIn {
  display: none;
}

.swiper-item .rechargeIn.active {
  display: block;
  position: absolute;
  z-index: 21;
  transform: translateX(0%);
  color: #ffffff;
  font-size: 60rpx;
  top: 36%;
  left: 7%;
  border-bottom: 2rpx solid #ffffff;
  width: 85%;
  height: 64rpx;
  padding-left: 66rpx;
}

/* 表单 */
.card-recharge {
  margin: 0 40rpx 40rpx 40rpx;
  display: flex;
}

.card-recharge .sec {
  text-align: center;
  height: 121rpx;
  width: 207rpx;

  border: 2rpx solid #f8484a;
  border-radius: 8rpx;
}

.card-recharge .sec .title {
  width: 100%;
  font-size: 32rpx;
  font-weight: 400;
  color: #000000;
  line-height: 70rpx;
}

.card-recharge .sec .value {
  width: 100%;
  font-size: 20rpx;
  color: #878787;
}

.card-recharge .sec .txt {
  width: 100%;
  font-size: 32rpx;
  color: #000000;
  line-height: 115rpx;
}

.line {
  margin: 0 40rpx;
  border: 1rpx solid #dbdbdb;
}

.line-weight {
  height: 40rpx;
  background: #ebebeb;
}

.service {
  margin: 20rpx 40rpx 40rpx 40rpx;
}

.service .title {
  font-size: 32rpx;
  font-weight: 600;
  text-align: left;
  color: #000000;
  line-height: 45rpx;
  margin: 20rpx 0;
}

.service .box {
  text-align: center;
  height: 121rpx;
}

.card-form {
  margin: 20rpx 40rpx 200rpx 40rpx;
}

.desc-1 {
  width: 100%;
  font-size: 30rpx;
  font-weight: 600;
  color: #2c2c2c;
  line-height: 84rpx;
  letter-spacing: 2rpx;
}

.desc-2 {
  width: 100%;
  font-size: 30rpx;
  color: #2c2c2c;
}

/* 表单底 */
.foot {
  position: fixed;
  left: 0;
  bottom: 0;
  display: flex;
  width: 100%;
  height: 140rpx;
  background: #ffffff;
  box-shadow: 0px -4rpx 26rpx 0 rgba(0, 0, 0, 0.11);
}

.foot .left-wrapper {
  flex: 1;
  align-items: center;
}

.foot .pay-btn {
  font-size: 40rpx;
  width: 275rpx;
  font-family: Courier, Calibri, '黑体';
  background-color: #ff3d3d;
  text-align: center;
  line-height: 140rpx;
  color: #fff;
}

.count-txt {
  margin-left: 20rpx;
  font-size: 24rpx;
  color: #515151;
  letter-spacing: 2rpx;
}

.pay {
  display: flex;
  margin-top: 20rpx;
}

.in {
  display: flex;
  margin-top: 20rpx;
}

.pay .count-num {
  font-size: 28rpx;
  font-weight: 600;
  color: #e27844;
  letter-spacing: 2rpx;
}

.in .count-num {
  font-size: 28rpx;
  font-weight: 600;
  color: #7b7b7b;
  letter-spacing: 2rpx;
}
</style>
